<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <%- include common %>
        <style>
            .layui-layout-body {
                padding-top: 0;
            }
            #table1{
                border: 1px solid #eee;
                padding: 10px;
            }

            .th tr th {
                width: 16%;
                text-align: center;
            }

            .modal-backdrop.in {
                display: none;
            }
            #updatebox{
                position: fixed;
                top: 300px;
            }
            #neiron1{
                text-align: center;
            }
            #neiron2{
              border: 1px solid black;
             
            }
        </style>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <%- include('head',{username:username})  %>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">

                <h3>客户列表</h3>
                <div id="table1">
                    <table >

                        <thead class="th">
                            <tr>
                                <th>序号</th>
                                <th>客户姓名</th>
                                <th>联系电话</th>
                                <th>身份证号</th>
                                <th>房间类型</th>
                                <th>操作</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class="th" id="neiron1">
                            <% if(data.length>0){ %>
                                <% data.forEach((item,i)=>{ %>
                                    <tr id="neiron2">
                                        <td>
                                            <%- i+1 %>
                                        </td>
                                        <td>
                                            <%- item.customer %>
                                        </td>
                                        <td>
                                            <%- item.tel %>
                                        </td>
                                        <td>
                                            <%- item.crd %>
                                        </td>
                                        <td>
                                            <%- item.roomtype %>
                                        </td>
                                        <td>
                                            <button class="layui-btn" onclick="tuifang('<%-item._id%>')">退房</button>

                                        </td>
                                        <td>
                                            <button data-_id="<%-item._id%>" type="button"
                                                class="btn layui-btn layui-btn-warm" data-toggle="modal"
                                                data-target="#updatebox" class="changeroom"
                                                onclick="btn('<%-item._id%>')">换房</button>
                                        </td>
                                    </tr>
                                    <% }) %>
                                        <% } %>

                        </tbody>
                    </table>
                    <div class="modal fade" tabindex="-1" role="dialog" id="updatebox">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">换房</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8 ss">
                                        <select name="roomtype" id="roomtype">
                                            <option value="标间">标间</option>
                                            <option value="商务房">商务房</option>
                                            <option value="豪华套间">豪华套间</option>
                                            <option value="双人间">双人间</option>
                                            <option value="单人间">单人间</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-danger" onclick="confirmUpdate()">确定换房</button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                </div>
            </div>

        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © 国际大酒店 layumen.com
        </div>
    </div>
    <!-- <script src="../src/layui.js"></script> -->
    <script>
        var did = null;
        function btn(_id) {
            did = _id
            console.log(did)
        }
        //JavaScript代码区域
        layui.use('element', function () {
            var element = layui.element;

        });




        function tuifang(_id) {
            $.ajax({
                type: 'get',
                url: '/removeone',
                data: {
                    _id
                },
                success: result => {
                    if (result.code == 200) {
                        window.location.reload()
                    }
                }
            })
        }

        $(document).on('click', '.changeroom', () => {
            console.log(this);
        })

        function confirmUpdate() {
            $.ajax({
                url: '/updateone',
                type: 'get',
                data: {
                    _id:did,
                    roomtype: $('#roomtype option:selected').val()
                },
                success: result => {
                    if (result.code == 200) {
                        window.location.reload()
                    }
                }

            })
        }


    </script>
</body>

</html>